<template>
    <el-dialog style="height: 500px" v-model="props.Selectvisible" :before-close="beforeClose" title="选择商品">
        <template #default="body">
            <div class="mt-4" style="margin-bottom: 10px;">
                <el-input v-model="input3" placeholder="商品名称搜索" class="input-with-select">
                    <template #append>
                        <el-button @click="onSearch" icon="Search" />
                    </template>
                </el-input>
            </div>
            <el-table :data="tableData.list" :border="true" @selection-change="btnreach">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="name" label="专题名称" />
                <el-table-column prop="productSn" label="货号">
                    <template #default="scope">
                        <span>商品：</span>
                        <span>评价：</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="price" label="价格" >
                    <template #default="scope">
                        ￥
                        {{ scope.row.price }}
                    </template>
            </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <div class="fen">
                <el-pagination v-model:current-page="tableData.pageNum" v-model="tableData.pageSize"
                    :page-sizes="[1, 5, 10, 20]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <div class="btn">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { defineProps, withDefaults, ref, reactive, Ref } from "vue";
import * as api from '../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'


let input3 = ref('');
let reach = reactive({
    id: 0,
    name: "",
});
let reacharr = ref([])

//列表数据
let tableData = reactive({
    list: <any>[],
    pageNum: 1,
    pageSize: 5,
    total: 0,
    totalPage: 0
})

// 接收父组件传来的参数
let props = withDefaults(
    defineProps<{
        Selectvisible: boolean;
    }>(),
    {
        Selectvisible: true,
    }
);



// 发送请求
let getTable = async () => {
    console.log(tableData.pageNum);
    console.log(tableData.pageSize);

    let dalist = await api.yxadmin.Inquiresp({
        pageNum: tableData.pageNum,
        pageSize: tableData.pageSize
    })
    console.log(dalist);
    tableData.list = dalist.list
    tableData.pageNum = dalist.pageNum
    tableData.pageSize = dalist.pageSize
    tableData.total = dalist.total
    tableData.totalPage = dalist.totalPage
};
getTable();

// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
    // console.log(val);
    tableData.pageSize = val;
    getTable();
}

// 改变当前页数
let handleCurrentChange = (val: number) => {
    // console.log(val);
    tableData.pageNum = val;
    getTable();

}

// 搜索
let onSearch = async () => {
    let searchData = await api.yxadmin.Inquiresp({
        keyword: input3.value,
        pageNum: tableData.pageNum,
        pageSize: tableData.pageSize
    });
    tableData.list = searchData.list
    tableData.pageNum = searchData.pageNum
    tableData.pageSize = searchData.pageSize
    tableData.total = searchData.total
    tableData.totalPage = searchData.totalPage

};
//获取id
let btnreach = (val: any) => {
    reacharr.value = val.map((item: any) => {
        return {
            productId: item.id,
            productName: item.name
        }
    })
    console.log(reacharr.value);

};

// 自定义事件
const emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: any): void;
}>();
//关闭
let beforeClose = () => {
    // console.log('beforeClose')
    emits("cancel")
}
// 取消
let onCancel = () => {
    // 清空 实际上是点击取消的时候，将form恢复成备份的值

    emits("cancel")
}

// 确定
let onConfirm = () => {
    // console.log(form.value);
    // console.log(row);
    // console.log(props.Editform.sort);

    emits('confirm', reacharr.value)
}

</script>


<style lang = "scss" scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.fen {
    float: right;
    margin-top: 30px;
}

.left {
    // float: left;
    width: 18%;
}

.btn {
    float: right;
    margin-top: 30px;
}
</style>